<template>

	<!-- 主体内容 -->
	<draggable class="drag-container" v-model="parentComponent.pageComponents" group="comList" animation="500"
		item-key="container-draggable">
		<!-- 动态组件 -->
		<template #item="{element, index}">
			<div class="componentsClass" :style="[{
				          border: selected(element.id) ? '1.5px solid #409eff' : '',
				        }]">
				<widgets :style="[setCommonStyle(element.setStyle.commonstyle)]" :pageComponent="element" @click.native.stop="activeComponent(element, index)"
					:data-type="element.type" :name="element.component" :id="element.id" :parentComponent="element">
				</widgets>
				<div v-show="selected(element.id)" class="selected" >
					<!-- 删除组件 -->
					<el-button type="primary" ><el-icon ><Grid /></el-icon>{{element.text}}</el-button>
					<el-button type="primary" @click.stop="deleteObj( index)"><el-icon ><Delete /></el-icon></el-button>

				</div>
			</div>
		</template>

	</draggable>

</template>

<script>
	import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
	
	import utils from '@/utils/index' // 方法类=
	import draggable from 'vuedraggable'
	import widgets from '@/widgets/index.vue'
	import {
		mapState,
		mapMutations
	}
	from 'vuex'
	import {
		activeComponent,
		deleteComponent
	} from '@/utils/componentEvent.js'
	export default {
		name: 'dragContainer',
		components: {
			draggable,
			widgets,
		},
		props: {
			parentComponent: Object
		},

		data() {
			return {
				id: null, //当前页面
				// selected: true, //删除标签显示
				index: null, //当前选中的index
				commonStyle: {}

			}
		},
		created() {
			utils.convertCss({})
		},

		computed: {
			...mapState(['$pageSchema', '$rightcom', '$currentproperties', '$curWidgetId', '$currentComponent']),
			selected() {
				return function(id) {
					return this.$curWidgetId == id
				}
			}

		},

		methods: {
			...mapMutations(['$setRightcom', '$setCurrentproperties', '$setCurWidgetId', '$setCurrentComponent',
				'$setPageSchema'
			]),
			/**
			 * 选择组件时复发
			 *
			 * @param {Object} res 当前组件对象
			 */
			activeComponent(res, index) {
				activeComponent(res, index)
			},

			/* 删除组件 */
			deleteObj(index) {
				deleteComponent(this.parentComponent.pageComponents, index)

				// this.parentComponent.pageComponents.splice(index, 1)
				// if (this.index === index) this.$setRightcom('decorate')
				// if (index < this.index) this.index = this.index - 1
			},
			setCommonStyle(str) {
				return utils.convertCss(str)
			}


		},

		watch: {

		},
	}
</script>

<style lang="scss" scoped>
	.drag-container {

		// overflow: visible

		height: 100%;

		/* 主体内容 */

		.componentsClass {
			// overflow: hidden;
			margin: 1px;

			border: 0.5px dashed $uni-border-color;

			&:hover {
				border: 1px dashed $uni-color-primary;
			}

			/* 删除组件 */

			.selected {

				margin-right: 2px;
				margin-top: 2px;
				// background-color: $uni-color-primary;
				position: absolute;
				display: flex;
				justify-content: flex-end;
				right: 0px;
				// bottom: -21px;
				font-size: 12px;
				z-index: 99;

				::v-deep .el-button {
					padding: 2px 8px;
					font-weight: normal;
					font-size: 12px;
					flex-shrink: 0;
					margin-left: 1px;
					border-radius: 2px;
					height: 20px;
				}
			}
		}



	}
</style>